<template>
     <div class="lime-container">
            <div class="lime-body">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <div class="page-title">
                                <nav aria-label="breadcrumb">
                                  <ol class="breadcrumb breadcrumb-separator-1">
                                    <li class="breadcrumb-item"><a href="#">Components</a></li>
                                    <li class="breadcrumb-item active" aria-current="page">Badge</li>
                                  </ol>
                                </nav>
                                <h3>Badge</h3>
                                <p class="page-desc">Documentation and examples for badges, our small count and labeling component.</p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Default</h5>
                                    <p>Badges scale to match the size of the immediate parent element by using relative font sizing and em units.</p>
                                    <h1>Example heading <span class="badge badge-secondary">New</span></h1>
                                    <h2>Example heading <span class="badge badge-secondary">New</span></h2>
                                    <h3>Example heading <span class="badge badge-secondary">New</span></h3>
                                    <h4>Example heading <span class="badge badge-secondary">New</span></h4>
                                    <h5>Example heading <span class="badge badge-secondary">New</span></h5>
                                    <h6>Example heading <span class="badge badge-secondary">New</span></h6>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Contextual variations</h5>
                                    <p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
                                    <span class="badge badge-primary">Primary</span>
                                    <span class="badge badge-secondary">Secondary</span>
                                    <span class="badge badge-success">Success</span>
                                    <span class="badge badge-danger">Danger</span>
                                    <span class="badge badge-warning">Warning</span>
                                    <span class="badge badge-info">Info</span>
                                    <span class="badge badge-light">Light</span>
                                    <span class="badge badge-dark">Dark</span>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Pill Badges</h5>
                                    <p>Add any of the below mentioned modifier classes to change the appearance of a badge.</p>
                                    <span class="badge badge-pill badge-primary">Primary</span>
                                    <span class="badge badge-pill badge-secondary">Secondary</span>
                                    <span class="badge badge-pill badge-success">Success</span>
                                    <span class="badge badge-pill badge-danger">Danger</span>
                                    <span class="badge badge-pill badge-warning">Warning</span>
                                    <span class="badge badge-pill badge-info">Info</span>
                                    <span class="badge badge-pill badge-light">Light</span>
                                    <span class="badge badge-pill badge-dark">Dark</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xl">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">With Buttons</h5>
                                    <p>Badges can be used as part of links or buttons to provide a counter.</p>
                                    <button type="button" class="btn btn-primary">
                                        Notifications <span class="badge badge-light">4</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-xl">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">Links</h5>
                                    <p>Using the contextual .badge-* classes on an &lt;a&gt; element quickly provide actionable badges with hover and focus states.</p>
                                    <a href="#" class="badge badge-primary">Primary</a>
                                    <a href="#" class="badge badge-secondary">Secondary</a>
                                    <a href="#" class="badge badge-success">Success</a>
                                    <a href="#" class="badge badge-danger">Danger</a>
                                    <a href="#" class="badge badge-warning">Warning</a>
                                    <a href="#" class="badge badge-info">Info</a>
                                    <a href="#" class="badge badge-light">Light</a>
                                    <a href="#" class="badge badge-dark">Dark</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lime-footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-12">
                            <span class="footer-text">2019 © stacks</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</template>

<script>
export default {

}
</script>

<style>

</style>